<template>
  <Header></Header>
  <Drawer></Drawer>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #2AB28B;">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item >机关单位</el-breadcrumb-item>
  </el-breadcrumb>

  <div class = 'pageListBotton'>
    <el-button :icon="CirclePlus" color="#626aef" style="color: white" round @click="onPageAdd">
      新建机关
    </el-button>

    <span class="onBtnRight" @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
  </div>

  <div class="pageListBotton">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="单位名称">
        <el-input v-model="name" placeholder="请输入单位名称"></el-input>
      </el-form-item>
      <el-form-item label="园长姓名">
        <el-input v-model="principal" placeholder="请输入园长姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="mobile" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="page_provider_title">成立日期</div>
        <el-config-provider :locale="zhCn">
          <el-date-picker
              v-model="createtime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :style="{'float':'left'}"
          ></el-date-picker>
        </el-config-provider>
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" color="#626aef" style="color: white" round  @click="fetchData(0,0, 1)">搜索</el-button>
        <el-button round @click="fetchData(1,0, 1)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-table :data="tableData" style="width: 90%;margin-left: 5%;" v-infinite-scroll="load"  infinite-scroll-disabled="loading" >
    <div class="loading" v-if="loading">
      <span id="load-text">{{loadText}}</span>
    </div>
    <el-table-column prop="id" label="序号" />
    <el-table-column prop="name" label="单位名称" />
    <el-table-column prop="total_number" label="总人数" />
    <el-table-column prop="boys_number" label="男孩人数" />
    <el-table-column prop="girls_number" label="女孩人数" />
    <el-table-column prop="address" label="详细地址" />
    <el-table-column prop="cadre" label="负责人" />
    <el-table-column prop="mobile" label="联系电话" />
    <el-table-column prop="principal" label="园长姓名" />
    <el-table-column prop="teacher_number" label="教师人数" />
    <el-table-column prop="createtime" label="创建时间" width="200"/>
    <el-table-column fixed="right" label="操作" style="width: 40%;">
      <template #default="scope">
        <el-button type="text"  style="color: #626aef" @click="onHandleClick(scope.row.id)">编辑</el-button>
        <el-button type="text" style="color: #626aef" @click="onCompanyEnergy(scope.row.id)">能量</el-button>
        <el-button type="text" style="color: #626aef" @click="onGetDiet(scope.row.id)">食谱</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup>
import {defineComponent, onMounted, ref, watch, reactive} from 'vue'
import { Edit, CirclePlus, Search } from '@element-plus/icons-vue'
import http from "../utils/http";
import {ElMessage} from "element-plus";
import Header from './common/Header.vue';
import Drawer from './common/Drawer.vue';
import zhCn from'element-plus/lib/locale/lang/zh-cn'
import * as api from "../api/loginHttp";
import {useRoute, useRouter} from "vue-router"
const route = useRoute()
const router = useRouter()
const groupId = ref()
const labName = ref()
const id = ref()
const reportId  = ref()
const name  = ref()
const createtime = ref([]);
const principal  = ref()
const mobile  = ref()
const tableData  = ref()
const pages  = ref(0)
const limit  = ref(20)
const loading  = ref(false)
const loadText  = ref('正在加载...')
const totalPages = ref();

const fetchData = async (isReset, addTo = 0, Botton = 0) => {
  if (route.params.groupId) {
    groupId.value = route.params.groupId
    id.value = route.params.id
    reportId.value = route.params.reportId
    if(groupId.value == 3) {
      labName.value = '婴幼儿营养测评'
    } else if(groupId.value == 5) {
      labName.value = '孕产妇营养测评'
    } else if(groupId.value == 6) {
      labName.value = '成年人营养测评'
    } else if(groupId.value == 7) {
      labName.value = '慢性病营养测评'
    } else if (groupId.value == 8) {
      labName.value = '团体营养测评'
    } else {
      labName.value = '婴幼儿营养测评'
    }
  }

  if(Botton == 1 ){
    pages.value = 0;
  }

  let params = {
    'group_id': groupId.value,
    'pages': pages.value,
    'limit': limit.value,
  }

  params.pages = pages.value

  if (name.value != undefined) {
    params.name = name.value
  }

  if (principal.value != undefined) {
    params.principal = principal.value
  }

  if (mobile.value != undefined) {
    params.mobile = mobile.value
  }

  if (createtime.value[0] != undefined) {
    params.time_start = $getTimes(createtime.value[0]);
  }

  if (createtime.value[1] != undefined) {
    params.time_end = $getTimes(createtime.value[1])
  }


  // let data = await this.$getPageList(params)
  const data = await api.childrenCompanyList(params);

  let len = data.data.data.contents.length

  if (data && len == 0 && !len) {
    loadText.value = '没有找到相关数据'
  } else if (data && len < 20) {
    loadText.value = '暂无更多数据'
  } else {
    loading.value = false
  }

  if(addTo == 1){
    tableData.value = tableData.value.concat(data.data.data.contents); //因为每次后端返回的都是数组，所以这边把数组拼接到一起
  } else {
    tableData.value = data.data.data.contents;
  }
  totalPages.value = data.data.data.totalPages;

}

const load = async () => {
  //滑到底部时进行加载
  loading.value = true;
  pages.value = pages.value + 20; //页数+10
  await fetchData(0, 1); //调用接口，此时页数+1，查询下一页数据
}

const onHandleClick = async (ids) => {
  await router.push({'path': '/CompanyEdit/' + groupId.value +'/'+ ids})
}

const onHome = async () => {
  await router.push({'path': '/Home'})
}

const onPageAdd = async () => {
  await router.push({'path': '/CompanyAdd/' + groupId.value})
}

const onGetDiet = async (id) => {
  const { href } = await router.resolve({
    path:  "/CompanyDiet/"+groupId.value+"/"+ id
  });
  window.open(href, "_blank");
}

const  onCompanyEnergy = async (id) =>{

  const { href } = await router.resolve({
    path:  "/CompanyEnergy/"+groupId.value+"/"+ id
  });
  window.open(href, "_blank");
}

function $getTimes(params) {
  var date = new Date(params);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y + "-" + m + "-" + d;
  return time;
}

onMounted(() => {
  fetchData()
})

</script>

<style scoped>

</style>
